<template>
  <div>
    <div>
      <el-input placeholder="请输入员工名进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                clearable
                @clear="initEmpMoves"
                style="width: 350px;margin-right: 10px" v-model="keyword"
                @keydown.enter.native="initEmpMoves"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="initEmpMoves">
        搜索
      </el-button>
      <el-button icon="el-icon-search" type="primary" @click="showAddEmpMoveDialogVisible = true">
        添加
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="empMoves"
          style="width: 100%">
        <el-table-column
            prop="empName"
            label="调职人员"
            width="180">
        </el-table-column>
        <el-table-column
            prop="removeDate"
            label="调职日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="调后部门">
        </el-table-column>
        <el-table-column
            prop="posName"
            label="调后职位">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="原因">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="showEditEmpMoveView(scope.row)" style="padding: 3px" size="small">编辑</el-button>
            <el-button @click="deleteEmpMove(scope.row)" style="padding: 3px" size="small" type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          title="调职记录"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="editEmpMove" :rules="rules" ref="editEmpMoveRef">
          <el-form-item label="调职原因:" prop="reason">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="editEmpMove.reason"
                      placeholder="请输入调职原因"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="调职日期:" prop="removeDate">
            <el-date-picker
                v-model="editEmpMove.removeDate"
                type="date"
                placeholder="请输入调薪日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="调动后部门:" prop="afterDepId">
            <el-select v-model="editEmpMove.afterDepId" placeholder="请输入部门" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in deps"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="调动后职位:" prop="afterJobId">
            <el-select v-model="editEmpMove.afterJobId" placeholder="请输入职位" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="editEmpMove.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
          title="调动职位记录"
          :visible.sync="showAddEmpMoveDialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="empMove" :rules="rules" ref="addEmpMoveRef">
          <el-form-item label="调职原因:" prop="reason">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="empMove.reason"
                      placeholder="请输入调职原因"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="调职日期:" prop="removeDate">
            <el-date-picker
                v-model="empMove.removeDate"
                type="date"
                placeholder="请输入调薪日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="调动后部门:" prop="afterDepId">
            <el-select v-model="empMove.afterDepId" placeholder="请输入部门" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in deps"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="调动后职位:" prop="afterJobId">
            <el-select v-model="empMove.afterJobId" placeholder="请输入职位" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员:" prop="eid">
            <el-select v-model="empMove.eid" placeholder="人员" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in emps"
                  :key="item.id"
                  :label="item.workID+'-'+item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="empMove.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="showAddEmpMoveDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerMv",
  data() {
    return {
      keyword: "",
      showAddEmpMoveDialogVisible: false,
      empMoves: [],
      total: 0,
      page: 1,
      size: 10,
      dialogVisible: false,
      editEmpMove: {
        eid: "",
        removeDate: "",
        afterDepId: "",
        afterJobId: "",
        reason: "",
        remark: ""
      },
      empMove: {
        eid: "",
        removeDate: "",
        afterDepId: "",
        afterJobId: "",
        reason: "",
        remark: ""
      },
      rules: {
        eid: [{required: true, message: '调职员工不能为空', trigger: 'blur'}],
        removeDate: [{required: true, message: '日期不能为空', trigger: 'blur'}],
        afterDepId: [{required: true, message: '部门不能为空', trigger: 'blur'}],
        afterJobId: [{required: true, message: '职位不能为空', trigger: 'blur'}],
        reason: [{min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}],
        remark: [{min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}]
      },
      emps: [],
      deps: [],
      positions: []
    }
  },
  mounted() {
    this.initEmpMoves();
    this.getRequest("/personnel/remove/emps").then((resp) => {
      if (resp) {
        this.emps = resp;
      }
    });
    this.getRequest("/personnel/remove/deps").then((resp) => {
      if (resp) {
        this.deps = resp;
      }
    });
    this.getRequest("/personnel/remove/positions").then((resp) => {
      if (resp) {
        this.positions = resp;
      }
    })
  },
  methods: {
    initEmpMoves() {
      let url = '/personnel/remove/?page=' + this.page + '&size=' + this.size + '&keyword=' + this.keyword;
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.empMoves = resp.data;
          this.total = resp.total;
        }
      })
    },
    currentChange(currentPage) {
      this.page = currentPage;
      this.initEmpEc();
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initEmpEc();
    },
    showEditEmpMoveView(empMove) {
      this.dialogVisible = true;
      Object.assign(this.editEmpMove, empMove);
      console.log(this.editEmpMove);
    },
    deleteEmpMove(data) {
      this.$confirm('此操作将永久删除【' + data.name + '的员工奖惩记录' + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/personnel/remove/" + data.id).then(resp => {
          if (resp) {
            this.initEmpMoves();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.showAddEmpMoveDialogVisible = false;
      this.empMove = {
        eid: "",
        removeDate: "",
        afterDepId: "",
        afterJobId: "",
        reason: "",
        remark: ""
      }
      this.resetForm();
    },
    editForm() {
      this.$refs['editEmpMoveRef'].validate(valid => {
        if (valid) {
          this.putRequest("/personnel/remove/", this.editEmpMove).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.initEmpMoves();
            }
          })
        }
      });
    },
    addForm() {
      console.log(this.empMove)
      this.$refs['addEmpMoveRef'].validate(valid => {
        if (valid) {
          this.postRequest("/personnel/remove/", this.empMove).then(resp => {
            if (resp) {
              this.showAddEmpMoveDialogVisible = false;
              this.initEmpMoves();
            }
          })
        }
      });
    },
    resetForm() {
      this.$refs['addEmpMoveRef'].resetFields();
      this.$refs['editEmpMoveRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>